<template>
  <div class="app-container-box">
    <div class="box-tag" />
    <span class="live-manager-title">直播管理</span>
    <div class="warp-line-top" />

    <div class="btn-box">
      <el-button type="primary" :disabled="editLiveDisabled" @click="handleEdit">编辑</el-button>
      <el-button type="danger" :loading="isDeleteLoading" :disabled="deleteLiveDisabled" @click="handelDelete">删除</el-button>
      <el-button
        type="primary"
        icon="el-icon-refresh"
        :loading="isLoading"
        @click="refreshLives"
      />

      <!-- <el-input v-model="liveListQuery.keyword" placeholder="请输入关键字" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" />
      </el-input> -->

      <el-pagination
        class="page-box"
        background
        layout="total, prev, pager, next, jumper"
        :total="livesCount"
        :pager-count="pagerCount"
        :page-size="liveListQuery.length"
        @current-change="pageChanged"
      />
    </div>

    <div class="table-list-box">
      <el-table
        ref="multipleTable"
        :data="liveListResp"
        style="width: 100%"
        height="654"
        :header-cell-style="elTableHeaderStyle"
        :cell-style="elTableCellStyle"
        tooltip-effect="dark"
        @current-change="clickRowChange"
      >
        <el-table-column label="选择" min-width="20" style="over" align="center">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row">
              <i />
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          align="center"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="OwnerAlias"
          label="所有者"
          align="center"
          min-width="90"
          show-overflow-tooltip
        />
        <el-table-column
          prop="PlayCount"
          label="累计播放次数"
          align="center"
          min-width="45"
        />
        <el-table-column
          prop="duration"
          label="时长(分钟)"
          :formatter="durationHandle"
          align="center"
          min-width="45"
        />
        <el-table-column
          prop="phone"
          label="权限"
          :formatter="liveListPermissionHandle"
          align="center"
          min-width="40"
        />
        <el-table-column min-width="50">
          <!-- eslint-disable-next-line vue/no-unused-vars -->
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="fuzzySearchKeyword"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              @click="handlePreview(scope.$index, scope.row)"
            >预览</el-button>
            <el-button
              @click="handleDetails(scope.$index, scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div v-if="tableRadio" class="live-details-outter-box">
      <el-dialog
        :visible.sync="liveDetailsVisible"
        @close="liveDetailsVisible=false"
      >
        <div slot="title" class="header-title">
          <div style="padding:15px 20px;">直播详情</div>
        </div>

        <el-form label-width="auto" style="margin-left: 100px">
          <el-form-item label="频道名称：">
            <span>{{ tableRadio.title }}</span>
          </el-form-item>

          <el-form-item label="直播时间：">
            <span>{{ tableRadio.StartTime }} - {{ tableRadio.EndTime }}</span>
          </el-form-item>

          <el-form-item label="嘉宾签到：">
            <span> {{ tableRadio.EnableSignIn == true ? '开启' : '关闭' }} </span>
          </el-form-item>

          <el-form-item label="问卷调查：">
            <span>{{ tableRadio.questionnaire || '无' }}</span>
          </el-form-item>

          <el-form-item label="所有者：">
            <span>{{ tableRadio.OwnerAlias || '无' }}</span>
          </el-form-item>

          <el-form-item label="频道分类：">
            <span>{{ tableRadio.label }}</span>
          </el-form-item>

          <el-form-item label="频道标签：">
            <span>{{ tableRadio.label }}</span>
          </el-form-item>

          <el-form-item label="照片直播：">
            <span>{{ tableRadio.PhotoLiveURL || '无' }}</span>
          </el-form-item>
          <div class="middle-warp-box" />

          <el-form-item label="直播链接：">
            <span>{{ liveDetails.playAddress }}</span>
            <a><i class="el-icon-copy-document" :data-clipboard-text="liveDetails.playAddress" @click="handleCopy('.el-icon-copy-document')" /></a>
          </el-form-item>

          <el-form-item label="推流域名：">
            <span>{{ liveDetails.pushDomain }}</span>
            <a><i class="el-icon-copy-document" :data-clipboard-text="liveDetails.pushDomain " @click="handleCopy('.el-icon-copy-document')" /></a>
          </el-form-item>

          <el-form-item label="推流加密串：">
            <span>{{ liveDetails.pushSecret }}</span>
            <a><i class="el-icon-copy-document" :data-clipboard-text="liveDetails.pushSecret " @click="handleCopy('.el-icon-copy-document')" /></a>
          </el-form-item>

          <el-form-item label="直播二维码：">
            <el-image
              style="width: 100px; height: 100px"
              :src="liveDetails.qrCodeImageB64"
              fit="fill"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="liveDetailsVisible = false">取消</el-button>
          <el-button type="primary" @click="liveDetailsVisible = false">确定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑直播 -->
    <div class="live-details-outter-box">
      <el-dialog :visible.sync="editLiveOuterVisible" @close="dialogClosed">
        <div slot="title" class="header-title">
          <div style="padding:15px 20px; color: white;">编辑直播</div>
        </div>

        <el-dialog
          width="30%"
          :visible.sync="domainManagerVisible"
          append-to-body
        >
          <div slot="title">
            <div style="padding:15px 20px;">领域管理</div>
          </div>
          <el-form label-width="auto" style="margin-left: 10px">
            <el-form-item>
              <el-input
                v-model="addDomainData.name"
                placeholder="请输入领域名称"
                maxlength="20"
                style="width: 50%; margin-right: 10px;"
              />
              <el-button type="primary" @click="createDomain">添加</el-button>
              <el-button
                type="danger"
                :disabled="domainDeleteBtnDisabled"
                :loading="deleteDomainLoading"
                @click="handleDeleteDomain"
              >删除</el-button>
            </el-form-item>
            <el-form-item>
              <div>
                <el-table
                  ref="multipleTable"
                  :data="domainList"
                  style="width: 100%"
                  height="500"
                  :header-cell-style="elTableHeaderStyle"
                  :cell-style="elTableCellStyle"
                  tooltip-effect="dark"
                  @current-change="domainClickRowChange"
                >
                  <el-table-column label="选择" width="55" style="over">
                    <template slot-scope="scope">
                      <el-radio v-model="EditLive.domain" :label="scope.row">
                        <i />
                      </el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="领域名称"
                    align="center"
                  />
                  <el-table-column
                    prop="created_at"
                    label="创建时间"
                    align="center"
                  />
                </el-table>
              </div>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="domainManagerVisible = false">取消</el-button>
            <el-button type="primary" @click="domainManagerVisible = false">确定</el-button>
          </div>
        </el-dialog>

        <el-form ref="EditLive" :model="EditLive" label-width="auto" style="margin-left: 100px" :rules="inputRules">
          <el-form-item label="标题：" prop="title">
            <el-input
              v-model="EditLive.title"
              placeholder="请输入直播间名称"
              clearable
            />
          </el-form-item>

          <el-form-item label="直播时间：" prop="timeSelected">
            <el-date-picker
              v-model="timeSelected"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="right"
              @change="liveTimeChanged"
            />
          </el-form-item>

          <el-form-item label="嘉宾签到：">
            <el-switch
              v-model="EditLive.EnableSignIn"
              active-color="#13ce66"
              inactive-color="#d7cdcb"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
            />
          </el-form-item>

          <el-form-item label="问卷调查：" prop="questionnaire">
            <el-input
              v-model="EditLive.questionnaire"
              placeholder="请输入问卷星地址"
              clearable
            />
          </el-form-item>

          <el-form-item label="照片直播：">
            <el-input
              v-model="EditLive.PhotoLiveURL"
              placeholder="请输入照片直播地址"
              clearable
            />
          </el-form-item>

          <el-form-item label="所有者：" prop="OwnerAlias">
            <el-autocomplete
              v-model="EditLive.OwnerAlias"
              size="medium"
              placeholder="请选择"
              class="search-el_input"
              default-first-option
              :fetch-suggestions="querySearchRoleAsync"
            />
          </el-form-item>

          <el-form-item label="所属领域：" prop="domain">
            <el-select
              v-model="EditLive.domain"
              v-el-select-loadmore="selectLoadMoreDomain"
              size="medium"
              placeholder="请选择"
              default-first-option
            >
              <el-option
                v-for="item in domainList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
                :disabled="item.disabled || false"
              />
            </el-select>
            <el-button type="text" style="margin-left: 10px;" @click="domainManagerVisible = true">领域管理</el-button>
          </el-form-item>

          <el-form-item label="标签：">
            <el-input
              v-model="EditLive.label"
              placeholder="输入标签"
            />
          </el-form-item>
          <el-form-item label="直播介绍：" prop="LiveDescImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleLiveDescSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="EditLive.LiveDescImage" :src="EditLive.LiveDescImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

          <el-form-item label="待播图：" prop="MobileWaitingImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleMobileWaitingSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="EditLive.MobileWaitingImage" :src="EditLive.MobileWaitingImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

          <el-form-item label="频道封面图：" prop="CommonBaseImage">
            <el-upload
              class="avatar-uploader"
              :action="fileUploadAddr"
              :show-file-list="false"
              :on-success="handleCommonBaseSuccess"
              :before-upload="beforeAvatarUpload"
              :headers="fileUploadHeaders"
            >
              <img v-if="EditLive.CommonBaseImage" :src="filterImage(EditLive.CommonBaseImage)" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="editLiveOuterVisible = false">取消</el-button>
          <el-button type="primary" @click="updateLiveReq">保存</el-button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import {
  liveList,
  deleteLive,
  getLiveAddress,
  getLiveQRCode,
  updateLive,
  listChannelTypes,
  deleteChannelType,
  createChannelType,
  getRoles
} from '@/api/lives'
import Clipboard from 'clipboard'
import { mapGetters } from 'vuex'
import _ from 'lodash'

export default {
  name: 'SubjectSetting',
  directives: {
    'el-select-loadmore': {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
        SELECTWRAP_DOM.addEventListener('scroll', function() {
          /**
				  * scrollHeight 获取元素内容高度(只读)
				  * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直	方向的滚动条, 那它的scrollTop的值默认为0.
				  * clientHeight 读取元素的可见高度(只读)
				  * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
				  * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
          */
          const condition = this.scrollHeight - (this.scrollTop + 1) <= this.clientHeight
          if (condition) {
            binding.value()
          }
        })
      }
    }
  },
  data() {
    return {
      inputRules: {
        title: [
          { required: true, message: '请输入直播间名称', trigger: 'blur' }
        ],
        timeSelected: [
          { type: 'array', required: true, message: '请选择直播时间', trigger: 'blur' }
        ],
        OwnerAlias: [
          { required: true, message: '请输选择一个所有者', trigger: 'blur' }
        ],
        domain: [
          { required: true, message: '请选择一个领域', trigger: 'blur' }
        ],
        LiveDescImage: [
          { required: true, message: '请上传直播介绍图片', trigger: 'blur' }
        ],
        MobileWaitingImage: [
          { required: true, message: '请上传待播图片', trigger: 'blur' }
        ],
        CommonBaseImage: [
          { required: true, message: '请上传直播封面图片', trigger: 'blur' }
        ]
      },
      // 模糊查询关键字
      fuzzySearchKeyword: '',
      // 是否禁用删除
      deleteLiveDisabled: true,
      // 是否可以编辑
      editLiveDisabled: true,
      // 是否获取所有领域标志
      isGetAllDomain: false,
      // 是否获取所的角色标志
      isGetAllRoles: false,
      rolesList: [],
      // 文件上传地址
      fileUploadAddr: '',
      // 直播权限选择的角色列表
      liveRoleListSelected: [],
      // 直播权限 public 公开；private 部分公开；
      livePermission: 'public',
      // 领域删除加载状态
      deleteDomainLoading: false,
      // 领域选择
      domainRadioRow: undefined,
      fileUploadHeaders: {
        Authorization: ''
      },
      // 领域管理删除按钮
      activeValue: true,
      inactiveValue: false,
      domainDeleteBtnDisabled: true,
      domainManagerVisible: false,
      domainList: [],
      timeSelected: [],
      editLiveOuterVisible: false,
      editLiveinnerVisible: false,
      isEditLive: false,
      liveDetailsVisible: false,
      isLoading: false,
      isDeleteLoading: false,
      livesCount: 0,
      liveListResp: [],
      tableRadio: undefined,
      pagerCount: 5,
      // 直播详情数据
      liveDetails: {
        playAddress: '',
        qrCodeImageB64: '',
        pushDomain: '',
        pushSecret: ''
      },
      // 角色query参数
      userRolesQuery: {
        start: 1,
        length: 10
      },
      // 添加直播领域数据
      addDomainData: {
        name: ''
      },
      // 所属领域过虑参数
      domainQuery: {
        start: 1,
        length: 14
      },
      // 编辑直播数据
      EditLive: {
        title: '',
        questionnaire: '',
        AutoRecorde: true,
        StartTime: '',
        EndTime: '',
        label: '',
        OwnerAlias: '',
        HospitalRoleName: '',
        domain: '',
        status: '',
        EnableSignIn: true,
        // PcPlayImage: '',
        // PcPlayListImage: '',
        // PcPlayRightImage: '',
        // MobilePlayImage: '',
        // MobilePlayListImage: '',
        // MobilePlayRoundImage: '',
        LiveDescImage: '',
        // CaseReportImage: '',
        // MobileMainPopup: '',
        PhotoLiveURL: '',
        allow_roles: [],
        AuthType: this.livePermission,
        MobileWaitingImage: '',
        CommonBaseImage: ''
      },
      // 获取直播请求
      liveListQuery: {
        start: 1,
        length: 9,
        keyword: '',
        order: 'desc'
      }
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  watch: {
    liveListQuery: {
      async handler(n, o) {
        var res = await liveList(this.liveListQuery)
        this.liveListResp = res.data
        this.livesCount = res.count
      },
      deep: true
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    },
    'fuzzySearchKeyword'(n, o) {
      this.liveListQuery.keyword = n
    }
  },
  async mounted() {
    await this.refreshLives()
    // 获取角色信息
    var rolesResp = await getRoles(this.userRolesQuery)
    this.rolesList = rolesResp.data
    // 领域信息
    var domainResp = await listChannelTypes(this.domainQuery)
    this.domainList = domainResp.data
    // 上传文件的地址
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    // 设置访问头
    this.fileUploadHeaders.Authorization = this.token
  },
  methods: {
    filterImage(val) {
      return val.includes('http') ? val : `http://static.hljpckj.com/${val}`
    },
    elTableHeaderStyle() {
      return {
        background: '#F0F1F2',
        font_size: '18px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#6D7A8E'
      }
    },
    elTableCellStyle() {
      return {
        font_size: '20px',
        font_family: 'PingFang SC',
        font_weight: 400,
        color: '#8B9DBA'
      }
    },
    // 选择行变化时
    clickRowChange(ev) {
      this.tableRadio = ev
      // 可删除
      this.deleteLiveDisabled = false
      // 可编辑
      this.editLiveDisabled = false
      // 直播数据数据
      this.EditLive.title = ev.title
      this.timeSelected = [ev.StartTime, ev.EndTime]
      this.EditLive.questionnaire = ev.questionnaire
      this.EditLive.label = ev.label
      this.EditLive.OwnerAlias = ev.HospitalRoleName
      this.EditLive.HospitalRoleName = ev.HospitalRoleName
      this.EditLive.domain = ev.domain
      this.EditLive.LiveDescImage = ev.LiveDescImage
      this.EditLive.PhotoLiveURL = ev.PhotoLiveURL
      this.EditLive.AutoRecorde = ev.AutoRecorde
      this.EditLive.allow_roles = ev.PermitRoles
      this.EditLive.AuthType = ev.AuthType
      this.EditLive.MobileWaitingImage = ev.MobileWaitingImage
      this.EditLive.CommonBaseImage = ev.CommonBaseImage
    },
    // 直播领域选择
    domainClickRowChange(ev) {
      this.domainDeleteBtnDisabled = false
      this.domainRadioRow = ev
    },
    pageChanged(ev) {
      this.liveListQuery.start = ev
    },
    // 刷新数据
    async refreshLives() {
      this.isLoading = true
      var res = await liveList(this.liveListQuery)
      this.liveListResp = res.data
      this.livesCount = res.count
      this.isLoading = false
    },
    // 时长处理
    durationHandle(row) {
      var num = row.duration / 60
      return num.toFixed(0)
    },
    // 权限处理
    liveListPermissionHandle(row) {
      if (row.AuthType === 'Public' || !row.AuthType) {
        return '公开'
      } else if (row.AuthType === 'WhiteListAndPassword') {
        return '白名单+密码'
      } else if (row.AuthType === 'Password') {
        return '仅密码'
      }
    },
    // 删除直播
    handelDelete() {
      this.isDeleteLoading = true
      if (!this.tableRadio) {
        this.$notify.error({
          title: '错误',
          message: '请选择要删除的直播'
        })
        this.isDeleteLoading = false
        return
      }
      var deleteID = this.tableRadio.id
      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLive(deleteID).then((res) => {
          if (res.code !== 200) {
            this.$notify.error({
              title: '错误',
              message: '删除失败！' + res.message
            })
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.isDeleteLoading = false
        this.refreshLives()
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 预览
    handlePreview(index, row) {
      var redictURL = process.env.VUE_APP_PC_BASE_API + '/video.html?id=' + row.id
      // var redictURL =  'http://localhost/video.html?id=' + row.id
      window.open(redictURL, '_blank')
    },
    // 详情
    handleDetails(index, row) {
      this.EditLive.EnableSignIn = row.EnableSignIn || true
      this.liveDetailsVisible = true
      getLiveQRCode(row.id, { type: '111' }).then((res) => {
        this.liveDetails.qrCodeImageB64 = `data:image/png;base64,` + res.data.url
      })
      getLiveAddress(row.id).then((res) => {
        this.liveDetails.playAddress = res.data.play
        this.liveDetails.pushDomain = res.data.push.Full.url
        this.liveDetails.pushSecret = res.data.push.Full.txSecret
      })
    },
    handleCopy(cls) {
      var clipboard = new Clipboard(cls)
      clipboard.on('success', e => {
        this.$message({
          message: '已复制',
          type: 'success'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    // 编辑
    handleEdit() {
      this.editLiveOuterVisible = true
    },
    // 添加直播领域
    createDomain() {
      createChannelType(this.addDomainData).then((res) => {
        if (res.code === 200) {
          this.domainList.unshift(res.data)
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        }
      }).catch(() => {
        this.$message.error('添加失败')
      })
    },
    // 删除直播领域
    handleDeleteDomain() {
      this.deleteDomainLoading = true
      if (!this.domainRadioRow) {
        this.$message.error('请选择一条数据')
      }
      deleteChannelType(this.domainRadioRow.id).then((res) => {
        this.domainDeleteBtnDisabled = false
        // 领域信息
        listChannelTypes(this.domainQuery).then((domainResp) => {
          this.domainList = domainResp.data
        })
      })
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      this.deleteDomainLoading = false
    },
    async querySearchRoleAsync(queryString, cb) {
      if (this.isGetAllRoles) {
        return
      }

      const res = await getRoles({
        start: 1,
        length: 99,
        keyword: queryString
      })
      cb(
        res.data.map((el) => ({
          value: el.RoleName,
          label: el.RoleName,
          disabled: !!el.disabled
        }))
      )
    },

    // 下拉列表触底加载更多角色
    selectLoadMoreRoles() {
      if (this.isGetAllRoles) {
        return
      }
      this.userRolesQuery.start += 1
      getRoles(this.userRolesQuery).then((res) => {
        if (res.data.length > 0) {
          this.rolesList = this.rolesList.concat(res.data)
        } else {
          this.rolesList = this.rolesList.concat([{ 'RoleName': '没有更多数据了', disabled: true }])
          this.isGetAllRoles = true
        }
      })
    },
    // 下拉列表触底加载更多领域
    selectLoadMoreDomain() {
      if (this.isGetAllDomain) {
        return
      }
      this.domainQuery.start += 1
      listChannelTypes(this.domainQuery).then((res) => {
        if (res.data.length > 0) {
          this.domainList = this.domainList.concat(res.data)
        } else {
          this.domainList = this.domainList.concat([{ 'name': '没有更多数据了', disabled: true }])
          this.isGetAllDomain = true
        }
      })
    },
    // 直播介绍上传成功回调
    handleLiveDescSuccess(res, file) {
      if (res.data.length > 0) {
        this.EditLive.LiveDescImage = res.data[0].AccessAddress
      }
    },
    // 待播图
    handleMobileWaitingSuccess(res, file) {
      if (res.data.length > 0) {
        this.EditLive.MobileWaitingImage = res.data[0].AccessAddress
      }
    },
    // 通用图片
    handleCommonBaseSuccess(res, file) {
      if (res.data.length > 0) {
        this.EditLive.CommonBaseImage = res.data[0].id
      }
    },
    // 上传前处理
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    },
    // 关闭弹窗
    dialogClosed() {
      this.userRolesQuery.start = 1
      this.rolesList = []
      this.domainQuery.start = 1
      this.domainList = []
    },
    // 更新直播请求
    updateLiveReq() {
      updateLive(this.EditLive, this.tableRadio.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
        this.editLiveOuterVisible = false
      }).catch(() => {
        this.$message.error('修改失败')
      })
    },
    // 直播时间改变事件
    liveTimeChanged(ev) {
      this.EditLive.StartTime = ev[0]
      this.EditLive.EndTime = ev[1]
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container-box {
  height: 1010px;

}
.box-tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  position: relative;
  top: 25px;
}
.warp-line-top {
  width: 1627px;
  height: 4px;
  background: #EDF5FB;
  top: 85px;
  position: absolute;
}

.table-list-box {
  position: absolute;
  top: 176px;
  left: 55px;
  width: 1518px;
  height: 654px;
}
.btn-box {
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  top: 114px;
  left: 54px;
  .input-with-select {
    margin: 20px;
    left: 600px;
  }
  .page-box {
    right: 125px;
    position: absolute;
  }
}
.live-details-outter-box {
    width: 975px;
    height: 783px;
  ::v-deep {
    .el-dialog__header {
      padding: 0px;
      padding-bottom: 0px;
    }
    .header-title {
      border: 1px solid #B2B2B2;
      opacity: 1;
      border-radius: 3px;
      background: #2E9BEA;
      opacity: 1;
      border-radius: 2px;
    }
  .el-dialog__headerbtn, .el-dialog__close {
        width: 29px;
        height: 29px;
        opacity: 1;
        color: white;
      }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 96px;
      height: 96px;
      }
  .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 96px;
      height: 96px;
      // line-height: 178px;
      text-align: center;
      }
  .avatar {
      width: 96px;
      height: 96px;
      display: block;
    }
  .el-icon-plus {
    align-items: center;
    display: flex;
    justify-content: center;
    }
  }
  #title-text {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    line-height: 35px;
    color: #6D7A8E;
    opacity: 1;
  }
  .el-icon-copy-document {
    margin-left: 5px;
  }
}
.middle-warp-box{
  width: auto;
  height: 0px;
  border: 1px solid #E6E6E6;
  opacity: 1;
}
.live-manager-title {
    width: 207px;
    height: 24px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4A5462;
    position: absolute;
    top: 27px;
    left: 44px;
  }
.image-inline-box {
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  text-align: center;
  .image-and-text-display {
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
  }
}
.el-form-item {
  width: 70%;
}

.search-el_input {
  width: 100%;
}
</style>